<template>
	<table-layout
		:header-cell-style="{ color: '#000', background: '#F5F7FA' }"
		height="calc(100vh - 520px)"
		:query-form="props.queryForm"
		:fetch-list="wmsInventoryLog"
		ref="dataTableRef"
		:createdIsNeed="false"
	>
		<template v-slot:tableLayout>
			<el-table-column
				:show-overflow-tooltip="true"
				v-for="(col, ind) in thList"
				:key="ind"
				:label="col.name"
				:prop="col.prop"
				:min-width="col.width ? col.width : '140'"
			>
				<template v-slot="scope">
					<div v-if="scope.row[col.prop]?.split(',').length === 3" style="display: inline-flex; align-items: center; gap: 2px">
						<span style="display: inline-flex; align-items: center; gap: 2px">
							<el-icon style="color: #f56c6c; font-weight: 900" v-if="Number(scope.row[col.prop]?.split(',')[0]) > 0"><Top /> </el-icon>
							<el-icon style="color: #67c23a" v-if="Number(scope.row[col.prop]?.split(',')[0]) < 0"><Bottom /> </el-icon>
							<span>{{ Math.abs(scope.row[col.prop]?.split(',')[0]) }} | </span>
							&nbsp;
						</span>
						<span>{{ scope.row[col.prop]?.split(',')[1] }} - {{ scope.row[col.prop]?.split(',')[2] }}</span>
					</div>
					<template v-else-if="col.name === '单据类型'">
						<template v-for="item in props.billTypeList">
							<span v-if="item.code === scope.row[col.prop]" :key="item.code">
								{{ item.name }}
							</span>
						</template>
					</template>
					<template v-else-if="col.name === '库存动作'">
						<template v-for="item in props.inventoryMoveTypeList">
							<span v-if="item.code === scope.row[col.prop]" :key="item.code">
								{{ item.name }}
							</span>
						</template>
					</template>
					<template v-else-if="col.name === '影响库存类型'">
						<template v-for="item in props.effectInventoryTypeList">
							<span v-if="item.code === scope.row[col.prop]" :key="item.code">
								{{ item.name }}
							</span>
						</template>
					</template>
				</template>
			</el-table-column>
		</template>
	</table-layout>
</template>
<script setup lang="tsx" name="whsFlowList">
const thList = reactive([
	{ name: '操作时间', prop: 'createTimestamp', width: '160' },
	{ name: '操作人', prop: 'createBy', width: '100' },
	{ name: '单据类型', prop: 'billType', width: '120' },
	{ name: '关联单据号', prop: 'associateOrderCode', width: '140' },
	{ name: '库存动作', prop: 'inventoryMoveType', width: '150' },
	{ name: '操作详情', prop: 'operateDetail', width: '190' },
	{ name: '影响库存类型', prop: 'effectMoveType', width: '150' },
	{ name: '待到货数', prop: 'planQty', width: '150' },
	{ name: '在途数', prop: 'onwayQty', width: '150' },
	{ name: '待检待上架量', prop: 'preApprovalQty', width: '150' },
	{ name: '良品占用量', prop: 'goodUsageQty', width: '150' },
	{ name: '良品可用量', prop: 'goodAvailableQty', width: '150' },
	{ name: '次品占用量', prop: 'defectiveUsageQty', width: '150' },
	{ name: '次品可用量', prop: 'defectiveAvailableQty', width: '150' },
	{ name: '采购单号', prop: 'purchaseOrderCode', width: '120' },
	{ name: '供应商', prop: 'supplierName', width: '120' },
]);
import { wmsInventoryLog } from '/@/api/inventory/index';
const props = defineProps({
	queryForm: {
		type: Object,
		default: () => {
			return {};
		},
	},
	billTypeList: {
		type: Array,
		default: () => {
			return [];
		},
	},
	inventoryMoveTypeList: {
		type: Array,
		default: () => {
			return [];
		},
	},
	effectInventoryTypeList: {
		type: Array,
		default: () => {
			return [];
		},
	},
});

onMounted(() => {
	toRefresh();
});

const toRefresh = () => {
	dataTableRef?.value.refresh();
};
const dataTableRef = ref();
defineExpose({
	toRefresh,
});
</script>
<style lang="scss" scoped>
</style>
